<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>收货地址</title>
	<link rel="stylesheet" href="${ctx}/css/reset.css"/>
	<link rel="stylesheet" href="${ctx}/css/icons/iconfont.css"/>
    <link rel="stylesheet" href="${ctx}/css/recAddress.css"/>
    <link rel="stylesheet" href="${ctx}/css/city-picker.css"/>
</head>
<body>
    <div class="content fl">
        <div class="recAddressTitle">收货地址</div>
        <div class="recAddressList">
            <div class="addAddress-statisic">
                <button id="addAddress"><span>+</span>新增收货地址</button>
                <span>您已创建<span id="yetAddress">${addressList.size() }</span>个收货地址，最多可创建<span id="allAddressNumber">20</span>个</span>
            </div>

            <!--没有数据的情况，用这行代码，然后把下面那个div设置为display:none，或者直接去掉-->
            <c:if test="${addressList.size() == 0 }">
            <iframe style="width: 960px;height: 515px;border: none;overflow: hidden;" src="/empty-data.html"></iframe>
            </c:if>
            
            <c:if test="${addressList.size() > 0 }">
            <div class="addressList clearfix">
                <c:forEach var="item" items="${addressList }">
                <div class="addressRule fl">
                    <div class="addressTop"></div>
                    <div class="addressInfo">
                        <div>
                            <span class="addressKey">收货人：</span>
                            <span class="addressValue">${item.personName }</span>
                            
                            <span class="defaultAddress" <c:if test="${item.master == 0 }">style="display: none;"</c:if>>默认地址</span>
                            
                        </div>
                        <div>
                            <span class="addressKey">所在地区：</span>
                            <span class="addressValue">${item.division }</span>
                        </div>
                        <div>
                            <span class="addressKey">详细地址：</span>
                            <span class="addressValue">${item.address }</span>
                        </div>
                        <div>
                            <span class="addressKey">联系方式：</span>
                            <span class="addressValue">${item.phone }</span>
                        </div>
                    </div>
                    <div class="addressOperate clearfix" id="${item.id }">
                        <span class="radioSpan <c:if test="${item.master == 1 }">radioOn </c:if>fl"></span>
                        <div class="defaultFont fl">设为默认地址</div>
                        <div class="fr edit-delete">
                            <a class="showChangeAlert" href="javascript:void(0)">编辑</a>
                            <span>|</span>
                            <a class="showDeleteAlert" href="javascript:void(0)">删除</a>
                        </div>
                    </div>
                </div>
                </c:forEach>
            </div>
            </c:if>
        </div>
    </div>

<div class="addAddressBg" style="display: none;">
    <div class="addAddressAlert">
        <div class="alertTitle">新增收货地址</div>
        <form class="addAddressForm" id="addAddressForm">
            <div>
                <span class="addressKey"><span>*</span>收货人</span>
                <input type="text" class="addressValue" name="personName" placeholder="请输入收货人"/>
            </div>
            <div>
                <span class="addressKey"><span>*</span>所在地区</span>
                <input readonly id="addressInput" type="text" class="addressValue" name="division" placeholder="请选择省市区" style="position: relative;"/>
                <div class="city-picker-selector" id="city-picker-selector" style="display: none;">
                    <div class="selector-item storey province">
                        <a href="javascript:;" class="selector-name reveal">北京市</a>
                        <input type="hidden" name="userProvinceId" class="input-price val-error" value="110000" data-required="userProvinceId">
                        <div class="selector-list listing hide">
                            <ul>
                                <li>北京市</li>
                                <li>天津市</li>
                                <li>河北省</li>
                                <li>山西省</li>
                            </ul>
                        </div>
                    </div>
                    <div class="selector-item storey city">
                        <a href="javascript:;" class="selector-name reveal">北京市</a>
                        <input type="hidden" name="userCityId" class="input-price val-error" value="110100" data-required="userCityId">
                        <div class="selector-list listing hide">
                            <ul>
                                <li>北京市</li>
                            </ul>
                        </div>
                    </div>
                    <div class="selector-item storey district">
                        <a href="javascript:;" class="selector-name reveal">海淀区</a>
                        <input type="hidden" name="userDistrictId" class="input-price val-error" value="110108" data-required="userDistrictId">
                        <div class="selector-list listing hide">
                            <ul>
                                <li>东城区</li>
                                <li>西城区</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- end .city-picker-selector -->
            </div>
            <div>
                <span class="addressKey"><span>*</span>详细地址</span>
                <input type="text" class="addressValue" name="address" placeholder="请输入街道名称、门牌号、楼层等"/>
            </div>
            <div class="addressPhone">
                <span class="addressKey"><span>*</span>联系方式</span>
                <input id="addressPhone1" type="text" class="addressValue" name="phone" placeholder="手机号码"/>
                <span style="">或</span>
                <input id="addressPhone2" type="text" class="addressValue" name="fixphone" placeholder="固定电话"/>
            </div>
            <div class="saveAddress">
                <input type="button" value="保存收货地址"/>
            </div>
        </form>
    </div>
   </div> 
<jsp:include page="../common/jsResources.jsp"/>
<script type="text/javascript" src="${ctx}/js/citydata.min.js"></script>
<script type="text/javascript" src="${ctx}/js/cityPicker-1.1.5.js"></script>
<script type="text/javascript" src="${ctx}/js/recAddress.js"></script>
</body>
</html>